<template>
  <div class='icons'>
    <swiper :options="swiperOption">
      <swiper-slide v-for='(page,index) of pages' :key='index'>
        <div class='icon' v-for='item of page' :key='item.id'>
          <div class='icon-img'>
            <img class='icon-img-content' :src='item.imgUrl'>
          </div>
          <p class='icon-desc'>{{item.desc}}</p>
        </div>
      </swiper-slide> 
    </swiper>  
  </div>
</template>

<script>
export default {
  name:'homeicons',
  props:{
    iconList:Array
  },
  data(){
    return {
      swiperOption:{
        autoplay:false
      }
    }
  },
  computed:{
    pages(){
      const pages=[];
      this.iconList.forEach((item,index)=>{
        const page=Math.floor(index/8);
        if(!pages[page]){//pages[0]未定义，取反为true,则将page[0]定义为一个空数组
          pages[page]=[];
        }
        pages[page].push(item);
      })
      return pages;
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~styles/varibles.styl'
@import '~styles/mixin.styl'
.icons>>>.swiper-container
  overflow:hidden
  height:0
  padding-bottom:50%
.icons 
  margin-top:.1rem 
  .icon
    position:relative
    overflow:hidden
    float:left
    width:25%
    height:0
    padding-bottom:25%
    .icon-img
      position:absolute
      top:0
      left:0
      right:0
      bottom:.44rem 
      box-sizing:border-box
      padding:.1rem 
      .icon-img-content
        display:block
        margin:0 auto 
        height:100%
        overflow:hidden
    .icon-desc
      position:absolute
      left:0
      right:0
      bottom:0  
      height:.44rem
      line-height:.44rem 
      text-align:center
      color:$darktextcolor
      ellipsis()
</style>